<template>
	<view>
		<cu-navbar bgColor="bg-gradual-pink" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">我的</block>
		</cu-navbar>

		<view class="myHead margin-bottom">
			<view class="cu-list menu-avatar" v-if="vuex_user._id">
				<view class="cu-item">
					<view class="cu-avatar round lg" :style="[{backgroundImage:'url('+vuex_user.avatar+')'}]">
					</view>
					<view class="content">
						<view class="" v-text="vuex_user.nickname || '匿名'"></view>
						<view class="text-sm flex">
							<view class="text-cut">
								{{vuex_user.mobile || '--'}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cu-list menu-avatar" v-else>
				<view class="cu-item" @tap="goLogin" data-target="loginModal">
					<view class="cu-avatar round lg shadow">
						<text class="icon-myfill text-red"></text>
					</view>
					<view class="content">
						<view class="">登录</view>
						<view class="text-sm flex">
							<view class="text-cut">
								欢迎您来到3D特效相册！请尽情体验吧！
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="cu-bar bg-white solid-bottom">
			<view class='action'><text class="cuIcon-titles text-mauve"></text>导航</view>
		</view>

		<view class="cu-list menu sm-border">
			<view class="cu-item arrow" @click="goPage('/pages/my/photos',true)">
				<view class="content">
					<text class="cuIcon-camerarotate text-grey"></text>
					<text class="text-grey">我的相册</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="$cu.toast('开发中...')">
				<view class="content">
					<text class="cuIcon-pic text-grey"></text>
					<text class="text-grey">我的图片</text>
				</view>
			</view>
		</view>

		<view class="margin-top"></view>
	</view>
</template>

<script>
	export default {
		computed: {

		},
		onShow() {
			if(this.vuex_token){
				this.getUserInfo()
			}
		},
		data() {
			return {				
				isLogin: false,
				photos: []
			}
		},
		methods: {
			goLogin() {
				// #ifndef MP-WEIXIN
				let path = '/pages/login/login';
				// #endif
				// #ifdef MP-WEIXIN
				let path = '/pages/login/choose';
				// #endif
				this.goPage(path);
			},
			getUserInfo(){
				this.$api.getUserInfo().then(res=>{
					if(!res.code){
						this.$vuex('vuex_user',res.userInfo);
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f4f6f8;
	}
</style>
<style lang="scss" scoped>
	.myHead {
		position: relative;
		padding: 30rpx 0;
		background: #fff;

		image {
			position: absolute;
			bottom: 0;
		}
	}
	.myHead .cu-list .cu-item::after {
		display: none;
	}
</style>
